<template>
  <el-dialog :visible.sync="dialogVisible" width="700px" :close-on-click-modal="false" :close-on-press-escape	='false'
             :title="form.id?'编辑社交自动化发布':'创建社交自动化发布'" center>
    <div class="main">
      <div class="line">
        <b><span>*</span>规则名称:</b>
        <el-input size="small" v-model="form.name" minlength="1" show-word-limit
                  maxlength="20" placeholder="请输入规则名称"></el-input>
      </div>
      <div class="line">
        <b><span>*</span>选择模板:</b>
        <el-select size="small" v-model="form.templateId" placeholder="选择模板">
          <el-option v-for="item,index in templateList"
                     :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <a href="javascript:void(0)" @click="toReview">
          <span class="icon-review iconBtn" title="预览"></span>
          预览效果
        </a>
      </div>
      <div class="publish">
        <b><span>*</span>各平台时间设置</b> <span>(注：所选时间均为北京)</span>
        <ul>
<!--          <li v-if="isBind(account.facebookAccounts)">-->
<!--            <div class="top">-->
<!--              <img src="../../../public/img/icon/facebook.png" alt="">-->
<!--              <div class="detail">-->
<!--                <h1>Facebook</h1>-->
<!--                <p>您还尚未绑定facebook账号</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <span @click="toBind()">绑定账号</span>-->
<!--          </li>-->
<!--          <li v-else>-->
<!--            <div class="top">-->
<!--              <el-checkbox v-model="form.facebookEnable"></el-checkbox>-->
<!--              <img src="../../../public/img/icon/facebook.png" alt="">-->
<!--              <div class="detail">-->
<!--                <h1>facebook</h1>-->
<!--                <p>社交平台</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <el-date-picker size="mini" v-model="form.facebookPublishTime" value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                            type="datetime" :picker-options="pickerOptions"-->
<!--                            placeholder="选择日期时间">-->
<!--            </el-date-picker>-->
<!--            <p class="message">建议发布时间</p>-->
<!--          </li>-->
          <li v-if="isBind(account.twitterAccounts)">
            <div class="top">
              <img src="../../../public/img/icon/Twitter.png" alt="">
              <div class="detail">
                <h1>Twitter</h1>
                <p>您还尚未绑定twitter账号</p>
              </div>
            </div>
            <span @click="toBind()">绑定账号</span>
          </li>
          <li v-else>
            <div class="top">
              <el-checkbox v-model="form.twitterEnable"></el-checkbox>
              <img src="../../../public/img/icon/Twitter.png" alt="">
              <div class="detail">
                <h1>Twitter</h1>
                <p>社交平台</p>
              </div>
            </div>
            <el-date-picker size="mini" v-model="form.twitterPublishTime" value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime" :picker-options="pickerOptions"
                            placeholder="选择日期时间">
            </el-date-picker>
            <p class="message">建议发布时间</p>
          </li>
          <li v-if="isBind(account.linkedinAccounts)">
            <div class="top">
              <img src="../../../public/img/icon/linkedin.png" alt="">
              <div class="detail">
                <h1>Linkedin</h1>
                <p>您还尚未绑定linkedin账号</p>
              </div>
            </div>
            <span @click="toBind()">绑定账号</span>
          </li>
          <li v-else>
            <div class="top">
              <el-checkbox v-model="form.linkedinEnable"></el-checkbox>
              <img src="../../../public/img/icon/linkedin.png" alt="">
              <div class="detail">
                <h1>Linkedin</h1>
                <p>社交平台</p>
              </div>
            </div>
            <el-date-picker size="mini" v-model="form.linkedinPublishTime" value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime" :picker-options="pickerOptions"
                            placeholder="选择日期时间">
            </el-date-picker>
            <p class="message">建议发布时间</p>
          </li>
        </ul>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit" id="submitSocialRule">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {saveRules, updateRule} from "@/api/socialAutomation"
    import {xmllList} from "@/api/automation/xml"
    import {getSocialAccount} from "@/api/mail/admin/mail-set";
    export default {
        name: "SocialDialog",
        data() {
            return {
                dialogVisible: false,
                form: {
                    facebookEnable: '',
                    facebookPublishTime: '',
                    twitterEnable: '',
                    twitterPublishTime: '',
                    linkedinEnable: '',
                    linkedinPublishTime: '',
                    templateId: '',
                    name: '',
                },
                account: {
                    facebookAccounts: [],
                    twitterAccounts: [],
                    linkedinAccounts: []
                },
                templateList: [],
                steps: [
                    {
                        target: '#submitSocialRule',  // We're using document.querySelector() under the hood
                        content: '【社交自动化规则创建】<br>第四步，点击保存按钮创建邮件一条社交自动化规则'
                    },
                ],
                pickerOptions: {
                    disabledDate: time => {
                        return time.getTime() < Date.now() - 8.64e7
                    }
                },
            }
        },
        mounted() {
            this.getTemplate()
            this.getAccount();
        },
        methods: {
            isBind(arr){
                let state=true;
                arr.map(item=>{
                    if(item.isBind){
                        state= false;
                    }
                })
                return state;
            },
            addSocialRule(){
                this.dialogVisible = false;
            },
            toBind() {
                const path ='/system/platformBind'
                this.bus.$emit('listenAutoCheck',path)
                this.$router.push(path)
            },
            //获取社交账号
            getAccount() {
                getSocialAccount().then(res => {
                    if (res.data.success) {
                        this.account = res.data.data;
                    }
                })
            },
            //重置
            reset(params) {
                if (this.templateList.length == 0) {
                    this.$confirm('您还尚未创建社交模板，立即去创建', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: "success"
                    }).then(() => {
                        this.$router.push('/automation/template/xmlDetail/-1')
                    }).catch(() => {
                    });
                    return;
                }
                if (params) {//编辑
                    this.form = Object.assign({}, this.form, params)
                } else {
                    this.form = {
                        facebookEnable: '',
                        facebookPublishTime: '',
                        twitterEnable: '',
                        twitterPublishTime: '',
                        linkedinEnable: '',
                        linkedinPublishTime: '',
                        templateId: '',
                        name: '',
                    }
                }
                this.dialogVisible = true;
            },
            submit() {
                if (!this.dealMsg()) return;
                if (this.form.id) {//保存
                    updateRule(this.form).then(res => {
                        this.dealResult(res)
                    })
                } else {//新增
                    saveRules(this.form).then(res => {
                        this.dealResult(res)
                    })
                }

            },
            dealResult(res) {
                if(res.data.success){
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    this.dialogVisible = false;
                    this.$emit('getList')
                }else{
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                }
            },
            //获取模板列表
            getTemplate() {
                xmllList('', '', 1, 100).then(res => { //临时处理
                    if (res.data.success) {
                        this.templateList = res.data.data.records
                    }
                })
            },
            toReview() {
                if (!this.form.templateId) {
                    this.$message({
                        type: "success",
                        message: '请选择模板'
                    });
                    return;
                }
                let routeData = this.$router.resolve(`/automation/template/xmlReview/${this.form.templateId}`);
                window.open(routeData.href, '_blank');
            },
            dealMsg() {
                if (!this.form.name) {
                    this.$message({
                        type: "success",
                        message: '请输入模板名称'
                    });
                    return false
                }
                if (!this.form.templateId) {
                    this.$message({
                        type: "success",
                        message: '请选择模板'
                    });
                    return false
                }
                if (!this.form.facebookEnable && !this.form.twitterEnable && !this.form.linkedinEnable) {
                    this.$message({
                        type: "success",
                        message: '最少选择一个发布平台'
                    });
                    return false
                }
                if (this.form.facebookEnable) {
                    if (!this.form.facebookPublishTime) {
                        this.$message({
                            type: "success",
                            message: '请选择facebook平台发布时间'
                        });
                        return false;
                    }
                }
                if (this.form.twitterEnable) {
                    if (!this.form.twitterPublishTime) {
                        this.$message({
                            type: "success",
                            message: '请选择twitter平台发布时间'
                        });
                        return false;
                    }
                }
                if (this.form.linkedinEnable) {
                    if (!this.form.linkedinPublishTime) {
                        this.$message({
                            type: "success",
                            message: '请选择linkedin平台发布时间'
                        });
                        return false;
                    }
                }
                return true
            }
        }
    }
</script>

<style scoped lang="scss">
  .main {
    width: 90%;
    margin: 20px auto 0;

    b {
      font-size: 14px;
      color: #232323d6;
      font-weight: normal;
      margin-right: 10px;
    }

    .line {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .el-input,
      .el-select {
        width: 50%;
      }

      span.icon-review.iconBtn {
        margin: 0 5px;
      }

      b {
        span {
          color: red;
        }
      }

      a {
        color: #666;
        font-size: 12px;
      }
    }

    .publish {
      span {
        font-size: 12px;
        color: #8C8C8C;
      }

      b {
        span {
          color: red;
        }
      }

      ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        font-size: 13px;

        li {
          width: 30%;
          padding-top: 30px;
          padding-bottom: 20px;

          span {
            cursor: pointer;
            color: #2A97F9;
            border-bottom: 1px solid #2A97F9;
          }

          .top {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            img {
              width: 28px;
              height: 28px;
            }

            .detail {
              margin-left: 5px;

              h1 {
                font-size: 14px;
                color: #000;
                margin-bottom: 2.5px;
              }

              p {
                font-size: 12px;
              }

            }

            .el-checkbox {
              margin-right: 5px;
            }

            i {
              font-size: 28px;
            }
          }

          .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--datetime {
            width: 90%;
          }

          .message {
            font-size: 12px;
            color: #666;
            margin-top: 5px !important;
          }
        }
      }
    }
  }
</style>
